<template>
  <el-dialog
    :title="dialogTitle"
    :visible="dialogVisible"
    @close="dialogCancle"
    :close-on-click-modal="false"
    width="35vw"
    :modal-append-to-body="false"
    :append-to-body="true"
    top="25vh"
  >
    <el-form
      ref="graveInfo"
      size="small"
      :model="graveInfo"
      :rules="rules"
      label-width="100px"
      class="sys-dialog-style"
    >
      <el-form-item prop="name" label="类型名称：">
        <el-input
          type="text"
          v-model="graveInfo.name"
          placeholder="输入墓穴类型名称"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
      <el-form-item prop="area" label="墓穴面积：">
        <el-input
          type="text"
          v-model="graveInfo.area"
          placeholder="输入墓穴面积"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
      <el-form-item prop="price" label="墓穴单价：">
        <el-input
          type="text"
          v-model="graveInfo.price"
          placeholder="输入墓穴单价"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
      <el-form-item prop="remark" label="备注：">
        <el-input
          type="text"
          v-model="graveInfo.remark"
          placeholder="备注"
          maxlength="24"
          class="user-dialog-input"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogCancle" size="small">取 消</el-button>
      <el-button type="primary" @click="checkedSubmit" size="small" :loading="loadingFlg">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>

import { addGraveType } from '@/api/cemetery/cemetery.js'

export default {
  name: "graveTpeyAddDialog",
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },

  watch: {
    dialogVisible() {
      this.visible = this.dialogVisible;

      if (!this.visible)
        return;
    }
  },
  data() {
    var failedCheck = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入有效数据"));
      }
      return callback();
    };

    return {
      //是否加载
      loadingFlg: false,
      visible: false,
      parksOptions: [],
      graveInfo: {},
      rules: {
        name: [{ required: true, validator: failedCheck, trigger: "blur" }],
        area: [{ required: true, validator: failedCheck, trigger: "blur" }],
        price: [{ required: true, validator: failedCheck, trigger: "blur" }]
      }
    };
  },
  computed: {
    dialogTitle() {
      return "新增墓穴类型";
    }
  },
  methods: {
    //提交Point信息
    checkedSubmit() {
      this.$refs.graveInfo.validate(valid => {
        if (valid) {
          let message = "确认新增墓穴类型吗？";

          this.$confirm(message, "提示", {})
            .then(() => {
              this.loadingFlg = true;
              // 添加类型
              let params = this.graveInfo;
              addGraveType(params)
                //console.log(params)
                .then(res => {
                  this.loadingFlg = false;
                  this.$message({
                    message: res.message,
                    type: "success"
                  });
                  this.dialogCancle();
                  this.$emit("renovate");
                })
                .catch(res => {
                  this.loadingFlg = false;
                });
            })
            .catch(() => {});
        }
      });
    },
    //关闭弹窗
    dialogCancle() {
      this.visible = false;
      this.$refs.graveInfo.resetFields();
      this.$emit("dialogCancle", this.visible);
    },
  }
};
</script>
